<template>
  <confirm-dialog
    :title="title"
    :visible="visible"
    @handleClose="handleClose"
    width='25%'
  >
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </confirm-dialog>
</template>
<script lang="ts">
import Vue from 'vue';
import ConfirmDialog from '../../../components/Dialog/confirmDialog.vue';
export default Vue.extend({
  components: { ConfirmDialog },
  props: {
    deleteMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  data() {
    return {
      title: "",
      visible: false,
      loading: false,
      itemList: []
    }
  },
  methods: {
    init(option: any) {
      (this as any).title = option.title;
      (this as any).itemList = option.itemList;
      (this as any).visible = true;
    },
    submit() {
      (this as any).loading = true;
      (this as any).deleteMethod((this as any).itemList).then(() => {
        (this as any).handleClose();
      }).finally(() => {
        (this as any).loading = false;
      });
    },
    handleClose() {
      (this as any).title = "";
      this.loading = false;
      (this as any).visible = false;
      (this as any).itemList = [];
    }
  }
})
</script>
<style lang="scss" scoped>

</style>
